<template>
    <div id="typeManage">

        <div style="float:left;padding:10px 0" >
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/manageType' }">分类管理</el-breadcrumb-item>
                <el-breadcrumb-item>分类列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="float:right;">
            <el-button  size="mini"  @click="addTypeButton()" class="addType">新增</el-button>
        </div>
        <br><br>
        <el-table :data="tableData" style="width: 100%;" >
            <el-table-column  label="序号"  width="60">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        {{ scope.$index+1 }}
                    </div>
                </template>
            </el-table-column>
            
            <el-table-column  label="类别"  width="180">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        <span >{{ scope.row.name }}</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column  label="类别简介"  width="180">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper" v-if="scope.row.introduce">
                        <span>{{ scope.row.introduce }}</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column  label="类别logo"  width="120">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        <img :src="scope.row.picture_url" alt="加载中" width="35%"  v-if="scope.row.picture_url" style="margin-top:8px"> 
                    </div>
                </template>
            </el-table-column>

            <el-table-column  label="更新日期"  width="220">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.update_date }}</span>
                </template>
            </el-table-column>
            
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button  size="mini"  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini"  type="danger"  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

         <!-- 分页 -->
        <el-pagination style="margin-top:20px" layout="total, sizes, prev, pager, next, jumper" :total="totalNum" :current-page="currentPage" :page-size="pageSize"  @current-change="handleCurrentChange" @size-change="handleSizeChange"></el-pagination>


        <!-- dialog 弹框 -->
        <el-dialog title="博客类型" :visible.sync="dialogFormVisible" width="30%" :before-close="handleClose">
            <el-form :model="form" style="text-align:left;margin-left:-30px">
                <el-form-item label="名称" :label-width="formLabelWidth">
                    <el-input v-model="form.myBlogName" ></el-input>
                </el-form-item>

                <el-form-item label="简介" :label-width="formLabelWidth">
                    <el-input v-model="form.myBlogIntroduce" ></el-input>
                </el-form-item>

                <el-form-item label="配图" :label-width="formLabelWidth">
                    <input type="file" ref="myfile" accept=".jpg,.JPG,.png,.PNG,.jpeg,.JPEG"/>
                    <div v-if="flag == 1"><!-- 修改的时候才出现-->
                        <span style="color:red">修改操作的时候，若要修改文件，请先删除旧文件</span>
                        {{form.picUrl}}

                        <i class="el-icon-circle-close" style="color:red;cursor:pointer;" @click="handleDeleteFile()" v-if="form.picUrl"></i>
                    </div>
                    <el-button @click="importData()" type="success" size="mini" icon="el-icon-upload2">上传文件</el-button>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false; form.myBlogName = ''; form.myBlogIntroduce = '';  $refs.myfile.value = '';">取 消</el-button>
                <el-button type="primary" @click="showAddDialog()">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
export default {
    data(){
        return{
            flag:1,  //用于区分  新增?修改
            totalNum:0,
            currentPage:1,
            pageSize:10,
            uuidPic:'',
            fileName:'',
            dialogFormVisible: false,
            form: {
                id:'',
                myBlogName: '',
                myBlogIntroduce:'',
                picUrl:'',
                picture_id:''
            },
            formLabelWidth: '120px',
            tableData: []
        }
    },
    methods:{
        //删除文件
        handleDeleteFile(){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var data ={
                    filePath:this.form.picUrl,
                    picture_id:this.form.picture_id
                }

                this.axios.post("/file/deleteFile",data).then(resp=>{ 
                    if (resp) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }
                    this.form.picUrl = "";
                    this.getBlogTypeLists(this.currentPage,this.pageSize);
                })
                
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },

        importData(){
            //上传文件
            let myfile = this.$refs.myfile;
            let files = myfile.files;
            let file = files[0];


            if(!(file && file.name)){
                this.$message({
                    type: 'warning ',
                    message: "请选择图片"
                }); 
                return false;
            }

           this.fileName = file.name;

            if(!(this.fileName.endsWith("jpg")  || this.fileName.endsWith("JPG") || this.fileName.endsWith("png")  
                || this.fileName.endsWith("PNG")  || this.fileName.endsWith("JPEG")  || this.fileName.endsWith("jpeg"))){
                this.$message({
                    type: 'warning ',
                    message: "请上传jpg/JPG/png/PNG/jpeg/JPEG格式的图片"
                }); 
                return false;
            }


            var formData = new FormData();
            formData.append("file", file);
            this.axios.post("/file/uploadFile",formData).then(resp=>{
                if (resp) {
                    this.uuidPic = resp.data.data;

                    this.$message({
                        type: 'info',
                        message: "上传文件成功"
                    });

                    this.$refs.myfile.value = '';
                }
            })
        },
        //新增 类型  -> 确认按钮
        showAddDialog(){
            if(this.form.myBlogName.trim() == ""){
                this.$message({
                    type: 'warning ',
                    message: "博客类型名称不能为空"
                });
                return false;
            }


            var data = {
                id:this.form.id,
                name:this.form.myBlogName,
                introduce:this.form.myBlogIntroduce,
                picUUID:this.uuidPic,
                fileName:this.fileName,
                picture_id:this.form.picture_id
            }

            this.axios.post('/articleType/insertArticleType',data).then(response=> {  //新增/修改公用
                if(response.data.code == 500){
                    this.$message({
                        type: 'warning',
                        message: response.data.message
                    }); 
                }else{
                    if(this.flag == 2){
                        this.$message({
                            type: 'info',
                            message: "新增博客类型成功"
                        });
                    }else{
                        this.$message({
                            type: 'info',
                            message: "修改博客类型成功"
                        });
                    }
                    
                    this.fileName = "";
                    this.uuidPic = "";
                    this.form.picture_id = '';
                    this.form.id = '';
                    this.dialogFormVisible = false;
                    this.form.myBlogName = "";
                    this.form.myBlogIntroduce = "";
                    this.$refs.myfile.value = '';
                    //分页查询 博客类型列表  
                    this.getBlogTypeLists(this.currentPage,this.pageSize);
                }
            }).catch(error => {
                 this.$router.push({path:'/home'});
            });


           
        },
        addTypeButton(){
            this.dialogFormVisible = true;
            this.flag  = 2;
        },
        handleEdit(index, row) {
            console.log("handleEdit方法")
            console.log(index, row);

            this.flag  = 1;
            this.dialogFormVisible = true;
            this.form.myBlogName = row.name;
            this.form.myBlogIntroduce = row.introduce;
            this.form.picture_id = row.picture_id;
            this.form.picUrl = row.picture_url;
            this.form.id = row.id;
            
        },
        handleDelete(index, row) {
            //删除操作，最好再做一次校验
            var data = {
                id:row.id,
                picture_id:row.picture_id,
                picture_url:row.picUrl
            }

            this.axios.post('/articleType/deleteArticleType',data).then(response=> {
                if(response.data.code == 500){
                    this.$message({
                        type: 'warning ',
                        message: response.data.message
                    }); 
                }else{
                    this.getBlogTypeLists(this.currentPage,this.pageSize);
                }
            }).catch(error => {
                 this.$router.push({path:'/home'});
            });



            console.log(index, row);
        },
        handleClose(done) {
            this.dialogFormVisible = false;
            this.form.myBlogName = "";
            this.form.myBlogIntroduce = "";
            this.$refs.myfile.value = '';
        },
        getBlogTypeLists(currentPage,pageSize){
            var data = {
                currentPage,
                pageSize
            }

            this.axios.post('/articleType/getArticleTypes',data).then(response=> {
                if(response.data.code == 500){
                    this.$message({
                        type: 'warning ',
                        message: response.data.message
                    }); 
                }else{
                    console.log(response);
                    this.totalNum = response.data.data.articleToptal;


                    this.tableData = response.data.data.articleTypes;
                }
            }).catch(error => {
                 this.$router.push({path:'/home'});
            });
        },
        handleCurrentChange(val){
            console.log(`当前页: ${val}`);
            this.getBlogTypeLists(val,this.pageSize);
        },
        handleSizeChange(val){
            console.log(`每页 ${val} 条`);
            this.getBlogTypeLists(this.currentPage,val);
        }
    },
    mounted(){
        //分页加载  博客类型 列表
        this.getBlogTypeLists(this.currentPage,this.pageSize);

    }
}
</script>

<style scoped>
/* .addType:focus{
    background-color: #EF9E6F;
    border-color: #EF9E6F;
} */
.addType:hover{
    color: #fff;
    background-color: #CF0C16;
    border-color: #CF0C16;
}
.addType {
    color: #CF0C16;
    border-color: #CF0C16;
}



</style>